<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js</title>
</head>

<body>
    <!-- <a href="https://www.baidu.com">baidu</a>
    <img src="../html/cat.jpg" id="pic" width="200">
    <div class="demo"><span class="text">我是一个文本</span></div>
    <input type="text" name="" id="demo" value="我是一个input"> -->

    <!-- <div style="color: red;" id="demo">点击我变色</div> -->

    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>

    <script src="j/jquery-3.7.1.min.js"></script>
    <script>

        $("ul").remove();
        $("ul").empty();


        // $("ul").prepend("prepend");
        // $("ul").before("before");
        
        // $("ul").append("append");
        // $("ul").after("after");


        // let a = $("#demo").css("color");
        // console.log(a);

        // $("demo").click(function () {
        //     $("#this").css("color", "green");
        // });

        // let a = $("a").attr("href");
        // let b = $("#pic").attr("src");
        // console.log(a);
        // console.log(b);

        // $("#pic").click(function () {
        //     let pic = $("#pic").attr("src");
        //     if (pic == "../html/cat.jpg") {
        //         $(this).attr("src", "../html/rose.jpg");
        //     }else{
        //         $(this).attr("src","../html/cat.jpg");
        //     }
        // });



        // let a = $(".demo").text();
        // let b = $(".demo").html();
        // console.log(a);
        // console.log(b);
        // let c = $("#demo").val();
        // console.log(c);

        // $(".demo").mouseover(function () {
        //     $(this).text("哈哈哈");
        // });
        // $(".demo").mouseleave(function () {
        //     $(this).text("哈");
        // });

        $(".demo").mouseover(function () {
            $(this).html("<b>我是一个文本<b/>");
            $("#demo").val("我被修改了");
        });

    </script>
</body>

</html>